<template>
  <div>
    <div style="margin-bottom: 16px;display: flex;justify-content: flex-end;">
      <ElSelect v-model="queryOrderParams.status" placeholder="请选择订单状态" clearable style="width: 200px;"
        @change="handleStatusChange">
        <ElOption label="待支付" value="0"></ElOption>
        <ElOption label="已支付" value="1"></ElOption>
        <ElOption label="已取消" value="2"></ElOption>
      </ElSelect>
      <div style="width: 320px;margin-left: 16px;display: flex;">
        <ElDatePicker v-model="orderTime" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="handleTimeChange" clearable format="YYYY-MM-DD" value-format="YYYY-MM-DD"
          @clear="handleTimeChange" />
      </div>
      <ElInput :prefix-icon="Search" v-model="queryOrderParams.userPhone" placeholder="请输入手机号"
        style="width: 200px;margin-left: 16px;" @change="handleUserChange" clearable />
    </div>
    <ReTable :data="orderList" :columns="columns" :pagination="pagination" @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <template #status="{ row }">
        <ElTag v-if="row.status === 0" type="warning">待支付</ElTag>
        <ElTag v-if="row.status === 1" type="success">已支付</ElTag>
        <ElTag v-if="row.status === 2" type="danger">已取消</ElTag>
      </template>
    </ReTable>
  </div>
</template>

<script setup lang="ts">
import { getOrderList } from '@/api/order';
import { Search } from '@element-plus/icons-vue';
import ReTable from '@/components/ReTable';
import { onMounted } from 'vue';
import { ref } from 'vue';

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "OrderManage"
});

// 订单列表数据
const orderList = ref([]);
// 订单表格列配置
const columns = [
  {
    label: '订单号',
    prop: 'orderNo',
    align: 'center'
  },
  {
    label: '商品名称',
    prop: 'goodsName',
    align: 'center'
  },
  {
    label: '销售价格',
    prop: 'salePrice',
    align: 'center'
  },
  {
    label: '用户',
    prop: 'userPhone',
    align: 'center'
  },
  {
    label: '订单状态',
    prop: 'status',
    align: 'center',
    slotName: 'status'
  },
  {
    label: '下单时间',
    prop: 'orderTime',
    align: 'center'
  },
  {
    label: '支付时间',
    prop: 'payTime',
    align: 'center'
  }
]

// 分页数据
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 查询订单参数
const queryOrderParams = ref({
  pageNum: 1,
  pageSize: 10,
  status: '',
  orderTimeStart: '',
  orderTimeEnd: '',
  userPhone: ''
})

const orderTime = ref('')

// 查询订单列表
const queryOrderList = (params: any) => {
  // 调用接口获取订单列表数据
  getOrderList(params).then(res => {
    orderList.value = res.data.records;
    pagination.value.total = res.data.total;
    pagination.value.pageNum = params.pageNum;
    pagination.value.pageSize = params.pageSize;
  })
}

// 筛选状态
const handleStatusChange = (status: string) => {
  queryOrderParams.value.status = status;
  queryOrderList(queryOrderParams.value);
}

// 筛选时间
const handleTimeChange = (value: any) => {
  if (!value) {
    queryOrderParams.value.orderTimeStart = '';
    queryOrderParams.value.orderTimeEnd = '';
  } else {
    queryOrderParams.value.orderTimeStart = value[0] + ' 00:00:00';
    queryOrderParams.value.orderTimeEnd = value[1] + ' 23:59:59';
  }
  queryOrderList(queryOrderParams.value);
}

// 筛选用户
const handleUserChange = (value: string) => {
  queryOrderParams.value.userPhone = value;
  queryOrderList(queryOrderParams.value);
}

// 页码变化筛选
const handleCurrentChange = (pageNum: number) => {
  queryOrderParams.value.pageNum = pageNum;
  queryOrderList(queryOrderParams.value);
}

// 每页条数变化筛选
const handleSizeChange = (pageSize: number) => {
  queryOrderParams.value.pageSize = pageSize;
  queryOrderList(queryOrderParams.value);
}

onMounted(() => {
  queryOrderList({
    pageNum: 1,
    pageSize: 10
  })
})

</script>